<template>
  <a-tabs
      class="tabs-context"
      :defaultActiveKey="TableContext.defaultActiveKey"
      :activeKey="TableContext.defaultActiveKey"
      @change="tabsChange"
  >
    <a-tab-pane tab="指标列表" key="1">
      <a-table
          :scroll="{x: 100, y: '100%'}"
          :loading="TableContext.tableLoading"
          :bordered="true"
          :rowSelection="TableContext.additionalColumns && TableContext.additionalColumns.length > 0 ? {
            type: 'radio',
            onChange: selectChange,
            selectedRowKeys: TableContext.selectedRowKeys
          } : undefined"
          :rowKey="(record) => record.RN"
          :columns="TableContext.additionalColumns"
          :dataSource="TableContext.changeTableOriginal"
      />
    </a-tab-pane>

    <template v-if="TableContext.isEditTableComponent">
      <a-tab-pane tab="指标明细" key="2">
        <a-table
            :scroll="{x: 100, y: '100%'}"
            :loading="TableContext.tableLoading"
            :bordered="true"
            :rowKey="(record) => record.RN"
            :columns="TableContext.additionalColumns"
            :dataSource="TableContext.tableOriginal"
        />
      </a-tab-pane>
    </template>

    <template v-else>
      <a-tab-pane tab="指标明细" key="2">
        <edit-table
            :columns="TableContext.additionalColumns"
            :data-source="TableContext.tableOriginal"
        />
      </a-tab-pane>
    </template>

    <button-about-excel
        :is-import="TableContext.fileOperate.isImport"
        :is-export="TableContext.fileOperate.isExport"
        slot="tabBarExtraContent"
    />

  </a-tabs>
</template>

<script>
import {getParams} from "@/utils";
import EditTable from "@/components/editTable/EditTable.js";
import ButtonAboutExcel from "@/components/buttonAboutExcel/index";

export default {
  name: "TabsConsumer",
  components: {
    EditTable,
    ButtonAboutExcel
  },
  inject: {
    connectStore: {
      default: () => ({})
    }
  },
  methods: {
    async tabsChange(key) {
      if (this.TableContext.defaultActiveKey === key) return true;
      this.TableContext.defaultActiveKey = key;
      await this.switchDefaultActiveKey(key);
    },
    async switchDefaultActiveKey(key) {
      switch (key) {
        case '1':
          await this.TableContext.editGetTableColumnsRender('1', '1', false, false);
          return;
        case '2':
          await this.TableContext.editGetTableColumnsRender(getParams().tableId, '2', true, false);
          return;
        default:
          return;
      }
    },
    async selectChange(selectedRowKeys, selectedRows) {
      await this.TableContext.tableRowSelectChange(selectedRowKeys, selectedRows);
      this.TableContext.selectedRowKeys = selectedRowKeys;
      this.TableContext.defaultActiveKey = '2';
    },
  },
  computed: {
    TableContext() {
      return this.connectStore.value.TableContext;
    }
  }
}
</script>

<style scoped lang="less">
.tabs-context {
  background: white;
  padding: 15px;
}
</style>
